﻿<?xml version="1.0" encoding="utf-8"?><Articles><Article><ArticlesID>597</ArticlesID><Title>Tăng tốc độ hiển thị Web</Title><Body>&amp;lt;p&amp;gt;B&amp;amp;agrave;i viết n&amp;amp;agrave;y n&amp;amp;ecirc;u ra những vấn đề li&amp;amp;ecirc;n quan khi muốn tăng tốc độ hiển thị Web&amp;lt;br /&amp;gt;
&amp;lt;br /&amp;gt;
- Tại server: Giảm thiểu những t&amp;amp;iacute;nh to&amp;amp;aacute;n tr&amp;amp;ecirc;n server, tối ưu CSDL, tạo bộ đệm, tối ưu chương tr&amp;amp;igrave;nh...&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;- Đường truyền: Giảm thiểu dữ liệu truyền tr&amp;amp;ecirc;n mạng bằng c&amp;amp;aacute;ch giảm k&amp;amp;iacute;ch thước c&amp;amp;aacute;c file h&amp;amp;igrave;nh, giảm y&amp;amp;ecirc;u cầu trao đổi dữ liệu giữa server v&amp;amp;agrave; client...&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;- Tại m&amp;amp;aacute;y client: tối ưu m&amp;amp;atilde; html để tr&amp;amp;igrave;nh duyệt hiển thị nhanh.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Với chiến lược tr&amp;amp;ecirc;n, dưới đ&amp;amp;acirc;y l&amp;amp;agrave; 10 thủ thuật c&amp;amp;oacute; thể gi&amp;amp;uacute;p tăng tốc độ hiển thị trang web.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;1. D&amp;amp;ugrave;ng CSS định nghĩa thuộc t&amp;amp;iacute;nh của c&amp;amp;aacute;c đối tượng trong trang web&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Việc d&amp;amp;ugrave;ng CSS sẽ gi&amp;amp;uacute;p cải thiện tốc độ tải trang web đ&amp;amp;aacute;ng kể. Tr&amp;amp;igrave;nh duyệt sẽ chỉ tải file CSS về m&amp;amp;aacute;y client một lần, những lần sau c&amp;amp;aacute;c trang web sử dụng file CSS n&amp;amp;agrave;y sẽ lấy ngay tại client. Việc tập trung to&amp;amp;agrave;n bộ định nghĩa thuộc t&amp;amp;iacute;nh v&amp;amp;agrave;o file CSS gi&amp;amp;uacute;p cho đoạn m&amp;amp;atilde; HTML trở n&amp;amp;ecirc;n ngắn gọn, r&amp;amp;otilde; r&amp;amp;agrave;ng đồng thời gi&amp;amp;uacute;p giảm k&amp;amp;iacute;ch thước của trang web.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Một điểm tiện lợi nữa khi d&amp;amp;ugrave;ng file CSS l&amp;amp;agrave; bạn c&amp;amp;oacute; thể thay đổi m&amp;amp;agrave;u sắc, giao diện của những trang web một c&amp;amp;aacute;ch nhanh ch&amp;amp;oacute;ng th&amp;amp;ocirc;ng qua việc chỉnh sửa những thuộc t&amp;amp;iacute;nh trong file CSS.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;2. Viết Javascript tr&amp;amp;ecirc;n một trang v&amp;amp;agrave; d&amp;amp;ugrave;ng cho nhiều trang&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Điều n&amp;amp;agrave;y tương tự như kỹ thuật d&amp;amp;ugrave;ng file CSS cho mọi trang web. V&amp;amp;iacute; dụ đoạn m&amp;amp;atilde; Javascript hiển thị quảng c&amp;amp;aacute;o d&amp;amp;ugrave;ng cho nhiều trang, nếu bạn viết to&amp;amp;agrave;n bộ m&amp;amp;atilde; Javascript trong một file rồi khai b&amp;amp;aacute;o d&amp;amp;ugrave;ng n&amp;amp;oacute; ở c&amp;amp;aacute;c trang như sau:&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;amp;lt; script type=&amp;amp;rdquo;text/javascript&amp;amp;rdquo; src=&amp;amp;rdquo;quangcao.js&amp;amp;rdquo;&amp;amp;gt;&amp;amp;lt; /script&amp;amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Giống như file CSS, tr&amp;amp;igrave;nh duyệt chỉ tải về file n&amp;amp;agrave;y một lần.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;3. D&amp;amp;ugrave;ng AJAX&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;AJAX l&amp;amp;agrave; chữ viết tắt của Asynchronous JavaScript And XML, đ&amp;amp;acirc;y l&amp;amp;agrave; kỹ thuật d&amp;amp;ugrave;ng Javascript v&amp;amp;agrave; XML để tối ưu việc trao đổi dữ liệu giữa client v&amp;amp;agrave; server. Giả sử trang web của ban chứa rất nhiều th&amp;amp;ocirc;ng tin, trong đ&amp;amp;oacute; c&amp;amp;oacute; một phần chứa 2 combobox: Quốc Gia v&amp;amp;agrave; Th&amp;amp;agrave;nh Phố. Khi bạn chọn một quốc gia tr&amp;amp;ecirc;n combobox 1, th&amp;amp;igrave; trong combobox 2 c&amp;amp;aacute;c th&amp;amp;agrave;nh phố tương ứng sẽ hiện ra. Theo c&amp;amp;aacute;ch th&amp;amp;ocirc;ng thường, khi chọn một quốc gia, th&amp;amp;ocirc;ng số của n&amp;amp;oacute; sẽ được gửi về server. Tại đ&amp;amp;acirc;y nội dung của trang web được t&amp;amp;iacute;nh to&amp;amp;aacute;n lại rồi được gửi trả cho client với combobox2 chứa c&amp;amp;aacute;c th&amp;amp;agrave;nh phố của quốc gia được chọn. Như vậy chỉ một phần nhỏ trong trang web thay đổi m&amp;amp;agrave; phải tải về to&amp;amp;agrave;n bộ trang web v&amp;amp;agrave; vẽ lại. Với AJAX, sau khi xử l&amp;amp;yacute;, server chỉ gửi trả kết quả cho client danh s&amp;amp;aacute;ch c&amp;amp;aacute;c th&amp;amp;agrave;nh phố chứ kh&amp;amp;ocirc;ng phải to&amp;amp;agrave;n bộ trang web. Điều n&amp;amp;agrave;y cải thiện rất nhiều tốc độ đ&amp;amp;aacute;p ứng của trang web.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;4. Mạnh dạn bỏ những g&amp;amp;igrave; kh&amp;amp;ocirc;ng cần thiết&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Bỏ file flash, audio nếu ch&amp;amp;uacute;ng kh&amp;amp;ocirc;ng thực sự cần thiết. Ngo&amp;amp;agrave;i ra, đối với người lập tr&amp;amp;igrave;nh web, việc sử dụng control của HTML thay cho server control của ASP/JSP... cũng gi&amp;amp;uacute;p giảm được thời gian bi&amp;amp;ecirc;n dịch (từ ASP/JSP... sang HTML).&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;5. Tr&amp;amp;aacute;nh d&amp;amp;ugrave;ng table lồng trong table&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Khi bạn viết table lồng trong table, tr&amp;amp;igrave;nh duyệt sẽ mất nhiều thời gian hơn để hiển thị trang web. Đ&amp;amp;acirc;y l&amp;amp;agrave; điều &amp;amp;iacute;t người để &amp;amp;yacute; nhất nhưng lại l&amp;amp;agrave; một kỹ thuật cải thiện tốc độ hiển thị trang web đ&amp;amp;aacute;ng kể nhất. Khi bạn đặt một table b&amp;amp;ecirc;n trong một table, sẽ mất một khoảng thời gian kh&amp;amp;aacute; d&amp;amp;agrave;i để tr&amp;amp;igrave;nh duyệt web duyệt qua to&amp;amp;agrave;n bộ m&amp;amp;atilde; lệnh b&amp;amp;ecirc;n trong mỗi table rồi mới l&amp;amp;agrave;m đến việc tr&amp;amp;igrave;nh b&amp;amp;agrave;y l&amp;amp;ecirc;n m&amp;amp;agrave;n h&amp;amp;igrave;nh cho người d&amp;amp;ugrave;ng xem. Nếu c&amp;amp;oacute; thể, bạn h&amp;amp;atilde;y sử dụng CSS để tạo ra những d&amp;amp;ograve;ng v&amp;amp;agrave; cột cho trang web.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;6. Kh&amp;amp;ocirc;ng d&amp;amp;ugrave;ng table bao to&amp;amp;agrave;n bộ nội dung trang web&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Nếu bạn d&amp;amp;ugrave;ng một table lớn để tạo layout cho trang web như sau:&amp;lt;/p&amp;gt;
&amp;lt;p style=&amp;quot;text-align: center;&amp;quot;&amp;gt;&amp;lt;img width=&amp;quot;250&amp;quot; height=&amp;quot;236&amp;quot; alt=&amp;quot;&amp;quot; src=&amp;quot;http://dev.meotom.net/Uploads/admin/2009/11/8/1174194395webtable.jpg&amp;quot; /&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p style=&amp;quot;text-align: center;&amp;quot;&amp;gt;&amp;lt;span style=&amp;quot;font-size: smaller;&amp;quot;&amp;gt;Ảnh minh họa&amp;lt;/span&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Tr&amp;amp;igrave;nh duyệt sẽ phải tải to&amp;amp;agrave;n bộ th&amp;amp;ocirc;ng tin của c&amp;amp;aacute;c th&amp;amp;agrave;nh phần trong bảng gồm: Top, LeftMenu, Content... về m&amp;amp;aacute;y client, rồi xử l&amp;amp;yacute; t&amp;amp;iacute;nh to&amp;amp;aacute;n to&amp;amp;agrave;n bộ control, khoảng trắng, h&amp;amp;igrave;nh ảnh... b&amp;amp;ecirc;n trong table. Khi mọi việc đ&amp;amp;atilde; thực sự ho&amp;amp;agrave;n tất, tr&amp;amp;igrave;nh duyệt web l&amp;amp;uacute;c đ&amp;amp;oacute; mới hiển thị to&amp;amp;agrave;n bộ nội dung b&amp;amp;ecirc;n trong table l&amp;amp;ecirc;n m&amp;amp;agrave;n h&amp;amp;igrave;nh c&amp;amp;ugrave;ng l&amp;amp;uacute;c.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Nếu kh&amp;amp;ocirc;ng d&amp;amp;ugrave;ng table bao to&amp;amp;agrave;n bộ nội dung trang web, th&amp;amp;igrave; ngo&amp;amp;agrave;i việc giảm được dung lượng trang web, thời gian xử l&amp;amp;yacute; hiển thị tại m&amp;amp;aacute;y client, n&amp;amp;oacute; c&amp;amp;ograve;n cho ph&amp;amp;eacute;p tr&amp;amp;igrave;nh duyệt web hiển thị dần từng phần đ&amp;amp;atilde; xử l&amp;amp;yacute; xong, cho người d&amp;amp;ugrave;ng c&amp;amp;oacute; một v&amp;amp;agrave;i th&amp;amp;ocirc;ng tin để đọc trước, trong khi chờ những phần kh&amp;amp;aacute;c tiếp tục hiển thị, điều n&amp;amp;agrave;y tạo cho người d&amp;amp;ugrave;ng cảm gi&amp;amp;aacute;c trang web của bạn c&amp;amp;oacute; tốc độ hiển thị nhanh.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;7. Ph&amp;amp;acirc;n trang web th&amp;amp;agrave;nh c&amp;amp;aacute;c trang nhỏ hơn&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Thay v&amp;amp;igrave; hiển thị to&amp;amp;agrave;n bộ th&amp;amp;ocirc;ng tin tr&amp;amp;ecirc;n 1 trang web, bạn h&amp;amp;atilde;y ph&amp;amp;acirc;n trang web th&amp;amp;agrave;nh nhiều mục nhỏ v&amp;amp;agrave; hiển thị tr&amp;amp;ecirc;n nhiều trang kh&amp;amp;aacute;c nhau. Giống như Yahoo Mail, tại mỗi thời điểm, c&amp;amp;aacute;c bạn chỉ c&amp;amp;oacute; thể xem được ti&amp;amp;ecirc;u đề của 50 email l&amp;amp;ecirc;n m&amp;amp;agrave;n h&amp;amp;igrave;nh, để xem danh s&amp;amp;aacute;ch c&amp;amp;aacute;c email kh&amp;amp;aacute;c bạn phải nhấn li&amp;amp;ecirc;n kết next/previous...&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Điều n&amp;amp;agrave;y kh&amp;amp;ocirc;ng chỉ gi&amp;amp;uacute;p tăng tốc độ hiển thị trang web m&amp;amp;agrave; tr&amp;amp;ecirc;n thực tế, phần lớn người d&amp;amp;ugrave;ng thật sự kh&amp;amp;ocirc;ng th&amp;amp;iacute;ch phải ngồi chờ v&amp;amp;agrave;i ph&amp;amp;uacute;t để rồi xem một trang web c&amp;amp;oacute; nội dung kh&amp;amp;aacute; d&amp;amp;agrave;i, phải d&amp;amp;ugrave;ng đến scroll bar mới xem được hết to&amp;amp;agrave;n bộ nội dung.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;8. X&amp;amp;oacute;a c&amp;amp;aacute;c khoảng trắng kh&amp;amp;ocirc;ng cần thiết&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Cố gắng x&amp;amp;oacute;a tất cả những khoảng trắng kh&amp;amp;ocirc;ng cần thiết trong đoạn m&amp;amp;atilde; html. H&amp;amp;atilde;y nhớ l&amp;amp;agrave; một lần ấn ph&amp;amp;iacute;m space sẽ l&amp;amp;agrave;m tăng k&amp;amp;iacute;ch thước trang web của bạn l&amp;amp;ecirc;n 1 byte. Việc loại bỏ khoảng trắng n&amp;amp;agrave;y c&amp;amp;oacute; thể l&amp;amp;agrave;m bằng tay hoặc d&amp;amp;ugrave;ng c&amp;amp;ocirc;ng cụ hỗ trợ như HTML code Cleaner (c&amp;amp;oacute; thể t&amp;amp;igrave;m với Google).&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;9. Dọn dẹp m&amp;amp;atilde; chương tr&amp;amp;igrave;nh cho s&amp;amp;aacute;ng sủa&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;H&amp;amp;atilde;y loại bỏ to&amp;amp;agrave;n bộ những thẻ trống như div&amp;amp;gt;&amp;lt;br /&amp;gt;
hay . Điều n&amp;amp;agrave;y kh&amp;amp;ocirc;ng những gi&amp;amp;uacute;p cải thiện dung lượng trang web, tăng tốc độ hiển thị m&amp;amp;agrave; c&amp;amp;ograve;n gi&amp;amp;uacute;p cho m&amp;amp;atilde; lệnh của bạn trở n&amp;amp;ecirc;n r&amp;amp;otilde; r&amp;amp;agrave;ng, gi&amp;amp;uacute;p dễ d&amp;amp;agrave;ng hiệu chỉnh hoặc n&amp;amp;acirc;ng cấp.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;10. Tối ưu h&amp;amp;igrave;nh ảnh&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Hạn chế d&amp;amp;ugrave;ng h&amp;amp;igrave;nh ảnh: H&amp;amp;igrave;nh ảnh gi&amp;amp;uacute;p cho trang web của bạn trở n&amp;amp;ecirc;n sống động v&amp;amp;agrave; l&amp;amp;ocirc;i cuốn, tuy nhi&amp;amp;ecirc;n h&amp;amp;igrave;nh ảnh cũng ch&amp;amp;iacute;nh l&amp;amp;agrave; một trong những nguy&amp;amp;ecirc;n nh&amp;amp;acirc;n l&amp;amp;agrave;m chậm tốc độ hiển thị trang web.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Chỉ định r&amp;amp;otilde; k&amp;amp;iacute;ch thước của h&amp;amp;igrave;nh ảnh: Khi tr&amp;amp;igrave;nh duyệt hiển thị h&amp;amp;igrave;nh ảnh của trang web, n&amp;amp;oacute; phải biết k&amp;amp;iacute;ch thước của tấm ảnh để c&amp;amp;oacute; thể chừa khoảng trống tr&amp;amp;ecirc;n m&amp;amp;agrave;n h&amp;amp;igrave;nh cho việc hiển thị tấm ảnh n&amp;amp;agrave;y, v&amp;amp;agrave; việc hiển thị sẽ theo tr&amp;amp;igrave;nh tự từ tr&amp;amp;ecirc;n xuống. Nếu bạn kh&amp;amp;ocirc;ng định r&amp;amp;otilde; k&amp;amp;iacute;ch thước của tấm ảnh (v&amp;amp;iacute; dụ: &amp;amp;lt;WIDTH=&amp;amp;rdquo;125&amp;amp;rdquo; height=&amp;amp;quot;&amp;amp;rdquo;50&amp;amp;rdquo;&amp;amp;quot;&amp;amp;gt;), tr&amp;amp;igrave;nh duyệt phải tải tấm ảnh trước để x&amp;amp;aacute;c định k&amp;amp;iacute;ch thước rồi mới xử l&amp;amp;yacute; hiển thị nội dung. Điều n&amp;amp;agrave;y cũng tương tự như việc sử dụng table bao to&amp;amp;agrave;n bộ nội dung. V&amp;amp;igrave; vậy nếu được, bạn n&amp;amp;ecirc;n sử dụng khai b&amp;amp;aacute;o &amp;amp;ldquo;width&amp;amp;rdquo;, &amp;amp;ldquo;height&amp;amp;rdquo; để chỉ định trước k&amp;amp;iacute;ch cỡ của h&amp;amp;igrave;nh ảnh.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Giảm k&amp;amp;iacute;ch thước h&amp;amp;igrave;nh ảnh: H&amp;amp;atilde;y giảm tối đa k&amp;amp;iacute;ch thước h&amp;amp;igrave;nh ảnh. Đ&amp;amp;ocirc;i khi bạn kh&amp;amp;ocirc;ng cần phải trương l&amp;amp;ecirc;n trang web những h&amp;amp;igrave;nh ảnh c&amp;amp;oacute; chất lượng thật cao m&amp;amp;agrave; c&amp;amp;oacute; thể d&amp;amp;ugrave;ng thumbnail thay thế. Định dạng GIF/JPG l&amp;amp;agrave; lựa chọn h&amp;amp;agrave;ng đầu cho trang web v&amp;amp;igrave; k&amp;amp;iacute;ch thước nhỏ.&amp;lt;/p&amp;gt;</Body><CommentEnabled>True</CommentEnabled><ViewCount>0</ViewCount><ReleaseDate>11/8/2009 8:19:12 PM</ReleaseDate><TotalComment>0</TotalComment><IsMedia>False</IsMedia><IsPicture>False</IsPicture><IsVote>True</IsVote><ArticlePassword /><PostVisible>0</PostVisible><ArticlePath>/2009/11/8/Tang-toc-do-hien-thi-Web-255</ArticlePath><Approved>True</Approved><ImagePath /><CategoryId>42</CategoryId><ArrayCatID>42|0</ArrayCatID></Article></Articles>